import React from "react";

export interface PriceWatchBoxProps {
  cryptoName: string;
  cryptoPrice: number;
  cryptoChanges: number | string;
  isAscending: boolean;
}

const PriceWatchBox: React.SFC<PriceWatchBoxProps> = (props) => {
  const { cryptoName, cryptoPrice, cryptoChanges, isAscending } = props;
  return (
    <>
      <div className="price-watch-container text-center">
        <div className="price-watch-content">
          <div className="crypto-name">{cryptoName}</div>
          <div className="display-3 mb-3 font-weight-bold crypto-price">
            <small className="opacity-8">$</small>
            {cryptoPrice}
          </div>
        </div>

        <div
          className={`opacity-8 crypto-changes  ${
            isAscending ? "text-success" : "text-danger"
          }`}
        >
          <b>{cryptoChanges}</b>
          <span> %</span>
        </div>
      </div>
    </>
  );
};

export default PriceWatchBox;
